.input-model{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(205, 205, 205, 0.2);
}
.emoji-layer{
  &.showLayer{transform: translate3d(0,-42vw,0);}
  transition: all 0.15s linear;
  width: 96%;
  height: 42vw;
  padding: 20upx 2%;
  background-color: #f3f3f3;
  border-top: solid 1upx #ddd;
  position: fixed;
  z-index: 20;
  top: 100%;
  .emoji-swiper{
    height: 40vw;
    swiper-item{
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      view{
        width: 12vw;
        height: 12vw;
        display: flex;
        justify-content: center;
        align-items: center;
        image{
          width: 8.4vw;
          height: 8.4vw;
        }
      }
    }
  }
  .more-layer{
    width: 100%;
    height: 42vw;
    .list{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .box{
        width: 18vw;
        height: 18vw;
        border-radius: 20upx;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 3vw 2vw 3vw;
        .icon{
          font-size: 70upx;
          width: 70rpx;
          height: 70rpx;
        }
      }
    }
  }
}
.input-box{
  width: 98%;
  min-height: 100upx;
  padding: 0 1%;
  background-color: #f2f2f2;
  display: flex;
  position: fixed;
  z-index: 20;
  bottom:-2upx;
  &.showLayer{transform: translate3d(0,-42vw,0);}
  transition: all 0.15s linear;
  border-bottom: solid 1upx #ddd;
  .voice,.more{
    flex-shrink: 0;
    width: 90upx;
    height: 100upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .send{
    //H5发送按钮左边距
    /* #ifdef H5 */
    margin-left: 20upx;
    /* #endif */
    flex-shrink: 0;
    width: 100upx;
    height: 100upx;
    display: flex;
    align-items: center;
    .btn1,.btn2{
      width: 90upx;
      height: 56upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      font-size: 24upx;
    }
    .btn1{
      background:#FFE226;
      color: #000000;
      font-weight: bold;
    }
    .btn2{
      background:linear-gradient(to right, #ffe226, #ffd916);
      color: #000000;
    }
  }
  .textbox{
    width: 100%;
    min-height: 70upx;
    margin-top: 15upx;
    .voice-mode{
      width: calc(100% - 2upx);
      height: 68upx;
      border-radius: 70upx;
      border:solid 1upx #cdcdcd;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28upx;
      background-color: #fff;
      color: #555;
      &.recording{
        background-color: #e5e5e5;
      }
    }
    .text-mode{
      width: 100%;
      min-height: 70upx;
      display: flex;
      background-color: #fff;
      border-radius: 40upx;
      .box{
        width: 100%;
        padding-left: 30upx;
        min-height: 70upx;
        display: flex;
        align-items: center;
        textarea{
          width: 100%;
          height: 100%;
        }
        input{
          width: 100%;
          height: 100%;
        }
      }
      .em{
        flex-shrink: 0;
        width: 80upx;
        padding-left: 10upx;
        height: 70upx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.ait-users-list{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 99999;
  .ait-list-header{
    padding: 20rpx;
    height: 80rpx;
    border-bottom: 1rpx solid #cbcbcb;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    .ait-header-left{
      width: 15%;
    }
    .ait-header-center{
      width: 70%;
    }
    .ait-header-right{
      width: 15%;
    }
    .ait-header-search{
      width: 85%;
      text-align: left;
      border-bottom: 1rpx solid #4084ff;
      border-radius: 20rpx;
      input{
        padding: 10rpx 20rpx;
      }
    }
  }
  .ait-list-item{
    height: calc(100% - 130rpx);
    overflow-x: hidden;
    overflow-y: scroll;
    .ait-user-item{
      padding: 20rpx;
      width: 100%;
      height: 80rpx;
      border-bottom: 1rpx solid #dedede;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      .ait-users-head{
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 360rpx;
      }
      .ait-users-name{
        height: 120rpx;
        line-height: 120rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}